<template>
  <header class="header">
    <div id="user-msg" class="mdui-chip" mdui-menu="{target: '#menu'}"> <!-- mdui-menu="{target: '#menu'}" -->
      <span class="mdui-chip-icon">{{ username.substring(0, 1) }}</span>
      <span class="mdui-chip-title">{{ username }}</span>
    </div>
    <ul class="mdui-menu" id="menu" align="left">
      <!-- 未登录 -->
      <li
        class="mdui-menu-item"
        v-if="!loginState.isLogin"
      >
        <router-link to="/login" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">account_circle</i>
          <!-- <i class="mdui-menu-item-icon mdui-icon material-icons">remove_red_eye</i> -->
          用户登录
        </router-link>
      </li>
      <!-- 用户登录后 -->
      <li
        class="mdui-menu-item"
        v-else
      >
        <a
          @click="logout()"
          class="mdui-ripple"
        >
        <i class="mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>
          退出登录
        </a>
      </li>

      <li class="mdui-menu-item">
        <router-link to="/cloud" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">insert_drive_file</i>
          我的文件
        </router-link>
      </li>
      <li class="mdui-menu-item">
        <router-link to="/remoteDownload" class="mdui-ripple">
        <i class="mdui-menu-item-icon mdui-icon material-icons">file_download</i>
          离线下载
        </router-link>
      </li>
      <!-- friendLink -->
      <li class="mdui-divider"></li>
      <!-- index -->
      <li class="mdui-menu-item">
        <router-link to="/index" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">web</i>
          首页
        </router-link>
      </li>
    </ul>

  </header>
</template>

<script>
// import mdui from 'mdui'
export default {
  data () {
    return {
      username: 'Guest',
      loginState: {
        isLogin: false
      }
    }
  },
  methods: {
    reStatus () {
      // console.log('reStatus')
      if (this.$store.state.username !== this.username) {
        this.loginState.isLogin = true
        this.username = this.$store.state.username
      } else {
        console.log('None Login')
        this.loginState.isLogin = false
      }
    },
    logout () {
      console.log('logout')
      this.$store.commit('setToken', null)
      this.$store.commit('setUser', 'Guset')
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      this.reStatus()
      this.$router.push('/')
    }
  },
  watch: {
    changUsername (newUsername, oldValue) {
      this.reStatus()
    }
  },
  computed: {
    changUsername () {
      return this.$store.state.username
    }
  },
  created () {
    this.reStatus()
  }
}
</script>

<style scoped>
.header {
  font-weight:100;
  display: flex;
  flex-direction: row-reverse;
  align-content: flex-start;
  height: auto;
  /* margin-right: 15px; */
}
ul{
  border-radius: 5px;
}
#menu{
  font-size: 12px;
}
#user-msg{
  margin-right: 15px;
  /* right: 15px; */
}
</style>
